<template>
    <div class="nav-box">
        <div v-if="!showSearch">
            <span class="icon iconfont icon-message" v-if="$route.name != 'search' "></span>
            <span class="icon iconfont icon-left" @click="goBack()" v-if="$route.name === 'search' "></span>
        </div>
        <div v-if="showSearch" @click="$emit('update:showSearch',false)">
            <span class="icon iconfont icon-left"></span>
        </div>
        <div class="nav-input">
            <span class="icon iconfont icon-search"></span>
            <input type="text" :placeholder="search" 
                v-model="word"
                @focus=" $emit('update:showSearch',true) " 
                />
        </div>
        <div class="nav-bottom" v-if="!showSearch" @click="goCart()">
            <span class="icon iconfont icon-cart"></span>
        </div>
        <div class="nav-search" v-if="showSearch">
            <span
                class="sec"
                @click="goSearch()"
            >搜索</span>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        showSearch:{
            type:Boolean,
            required:true
        }
    },
    data() {
        return {
            search:"汉服",
            word:"",
            history:[],
        }
    },
    methods: {
        goCart(){
            this.$router.replace("cart");
        },
        goBack(){
            this.$router.go(-1);
        },
        goSearch(){
            this.$emit('update:showSearch',false);
            let q = this.word==""?this.search:this.word;
            this.word = "";
            this.search = q;
            this.addHistory(q);

            this.$router.push({
                path:"/search",
                query:{
                    q:q
                }
            })
        },
        addHistory(word){
            if(this.history){
                if(this.history.indexOf(word)==-1){
                    this.history.unshift(word);
                }
            }else{
                this.history = [word];
            }
            localStorage.setItem("userWord",JSON.stringify(this.history));
            this.$root.$emit("updateHistory");
        },
        loadHotWord(){
            this.$api.loadDataFormWord({
                platform:"H5",
                code:"sketch"
            }).then(( { sketch } )=>{
                this.search = sketch.data.query;
            }).catch(this.$error)
        },
    },
    components:{
        
    },
    mounted() {
        let history = localStorage.getItem("userWord");
        this.history = JSON.parse(history);
        this.loadHotWord();
    },
}
</script>
<style lang="less" scoped>
.nav-box {
    height: @h;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    padding:20px 0;
    border-bottom: 1px solid @cc;
    > :first-child {
        flex-grow: 1;
        width: 10%;
        >span {
            font-size: 50px;
        }
    }
    > .nav-input {
        box-sizing: border-box;
        flex-grow: 3;
        > span {
            text-align: center;
            position: absolute;
            font-size:40px;
            left: 120px;
            top: 26px;
        }
        > input[type="text"]{
            box-sizing: border-box;
            width: 100%;
            height: 60px;
            border: none;
            border-radius: 2vw;
            outline: none;
            padding: 0 60px;
            background-color:@de;
        }
    }
    > .nav-bottom {
        flex-grow: 1;
        width: 10%;
        text-align: center;
        > span {
            font-size: 50px;
            flex-grow: 3;
            > span{
                font-size: 50px;
            }
        }
    }
    > .nav-search{
        flex-grow: 1;
        width: 10%;
        text-align: center;
        > .sec {
            font-size: 36px;
        }
    }
}

</style>
>>>>>>> 2020年1月6日10:04:19
